<template>
  <div class="cont">
    <div class="dia">
      <div class="header">
        <div class="title">全景资源</div>
        <div class="close" @click="emit('close')"></div>
      </div>
      <div class="content">
        <div class="list">
          <div class="btns">
            <el-button
              :class="state.type == 1 ? 'cusb2' : 'cusb1'"
              @click="state.type = 1"
              >高点切换</el-button
            >
            <el-button
              :class="state.type == 2 ? 'cusb2' : 'cusb1'"
              @click="state.type = 2"
              >低点设备调阅</el-button
            >
          </div>
          <div class="sear">
            <el-input
              class="cus"
              v-model="state.filterText"
              placeholder="请输入设备名称"
              suffix-icon="Search"
            />
          </div>
          <div class="tree">
            <el-tree
              ref="treeRef"
              default-expand-all
              :data="state.data1"
              :filter-node-method="filterNode"
              v-if="state.type == 1"
              :props="{ label: 'cameraName' }"
              @node-click="gdclick"
            >
              <template #default="{ node }">
                <img class="timg" src="/images/vv.png" /><span>{{
                  node.label
                }}</span>
              </template>
            </el-tree>
            <!-- :props="{ label: 'cameraName' }" -->
            <!-- default-expand-all -->
            <el-tree
              ref="treeRef"
              :data="state.data2"
              :filter-node-method="filterNode"
              v-if="state.type == 2"
              :props="defaultProps"
              node-key="cameraId"
              :default-expanded-keys="defaultKeys"
              accordion
              @node-click="ddclick"
            >
              <template #default="{ node }">
                <img class="timg" v-if="!node.data.type" src="/images/vv.png" />
                <span>{{ node.label }}</span>
              </template>
            </el-tree>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  oneData: Object,
});
const emit = defineEmits(["close", "gd", "dd"]);
const state = reactive({
  type: 1,
  data1: [],
  data2: [],
  filterText: "",
  numTime: 0,
});
const treeRef = ref();
watch(
  () => state.filterText,
  (val) => {
    treeRef.value.filter(val);
  }
);
const filterNode = (value, data) => {
  if (!value) return true;
  return data.cameraName ? data.cameraName.includes(value) : data.type.includes(value);
};

const gdclick = (node) => {
  state.numTime++;
  window.getSelection
    ? window.getSelection().removeAllRanges()
    : document.selection.empty();
  setTimeout(() => {
    if (state.numTime == 2) {
      emit("gd", node);
    }
    state.numTime = 0;
  }, 300);
};

let defaultProps = ref({
  children: 'list',
  label: function (data, node) {
    return (
      data.type ? data.type : data.cameraName
    );
  },
  
})

const ddclick = (node) => {
  if(node.type) return
  state.numTime++;
  window.getSelection
    ? window.getSelection().removeAllRanges()
    : document.selection.empty();
  setTimeout(() => {
    if (state.numTime == 2) {
      emit("dd", node);
    }
    state.numTime = 0;
  }, 300);
};
let defaultKeys = ref([])
const getData = () => {
  useApi.post("/dynamicview/ar/highandlows", {}).then((res) => {
    state.data1 = res.data.highList;
    state.data2 = res.data.lowGroupList;
    try{
      defaultKeys.value = [state.data2[0].list[0].cameraId]
    }catch(e) {
      console.error(e)
    }
  });
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.cont {
  width: 300px;
}

.dia {
  margin-top: 5px;
  width: 300px;
  height: 478px;
  display: flex;
  flex-direction: column;

  .header {
    width: 300px;
    height: 38px;
    background-image: url("/images/bg03.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;

    .title {
      margin-left: 30px;
      font-weight: 600;
      font-size: 14px;
      color: #ffffff;
    }

    .close {
      margin: 8px 2px 0 auto;
      width: 30px;
      height: 30px;
      cursor: pointer;
      opacity: 0.5;
    }
  }

  .content {
    width: 300px;
    height: 440px;
    background-image: url("/images/bg04.png"), url("/images/bbg.png");
    background-size: 100% 10%, 100% 100%;
    background-position-y: 103%, 0;
    background-repeat: no-repeat;
    padding: 10px 10px 12px 10px;

    .list {
      width: 100%;
      height: 100%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background-image: url("/images/mb1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .tree {
        width: 100%;
        height: 330px;
        overflow-y: auto;
        &::-webkit-scrollbar-thumb {
          background-color: #3ac3e6; /* 红色 */
        }
        &::-webkit-scrollbar {
          width: 3px;
          // height: 10px;
        }
        .el-tree {
          background: transparent;
          color: #ffffff;
          --el-tree-node-hover-bg-color: #67addc80;
        }
      }

      .btns {
        height: 36px;
        display: flex;
      }

      .sear {
        height: 36px;
      }
    }
  }
}

.timg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
:deep(.el-input) {
  --el-input-text-color: #ffffff;
  --el-input-bg-color: #003d6399;
}
</style>